<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>
<body>
	<!--音乐图标-->
	<div id="bgm" class="music">
		<audio src="image/bgm.mp3" loop="loop" autoplay="autoplay" id="au_bgm"></audio>
	</div>
	
	
	
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
            	<img src="image/p1_01.jpg" class="ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s"/>
            	<p class="ani"  swiper-animate-effect="flip" swiper-animate-duration="2s" swiper-animate-delay="0.2s">印社 IN STUDIO</p>
            	<p class="ani"  swiper-animate-effect="flip" swiper-animate-duration="2s" swiper-animate-delay="0.3s">WINTER COLLECTION</p>
            </div>
            <div class="swiper-slide page4">
            	<img src="image/stars.gif" class="star"/>
            	<div class="p4_box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.4s">
            		<img src="image/p4_01.png"/>
            		<p class="date">2017·2·15</p>
            		<p class="addr">中国/上海</p>
            	</div>
            	<div class="p4_box2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.4s">
            		<p class="brand">SMM</p>
            		<p class="pro">2017 春季新品发布会</p>
            	</div>
            	<div class="p4_border1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
            		<img src="image/p4_02.png"/>
            	</div>
            	<div class="p4_border2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
            		<img src="image/p4_02.png"/>
            	</div>
            	<div class="p4_border3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
            		<img src="image/p4_03.png"/>
            	</div>
            	<div class="p4_border4 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
            		<img src="image/p4_03.png"/>
            	</div>
            	<div class="p4_border5 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
            		<img src="image/p4_03.png"/>
            	</div>
            </div>
            <div class="swiper-slide page5">
            	<div class="p5_box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
            		<img src="image/p5_01.png"/>
            	</div>
            	<div class="p5_box2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
            		<img src="image/p5_01.png"/>
            	</div>
            	<div class="p5_box3 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">
            		<img src="image/p5_01.png"/>
            	</div>
            	<div class="p5_box4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
            		<img src="image/p5_02.jpg"/>
            	</div>
            	<div class="p5_box5 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s"></div>
            	<div class="p5_box6 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
            		<p>－春装潮流 诠释品牌－</p>
            	</div>
            	<div class="p5_box7 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s">
            		<img src="image/p5_03.png"/>
            	</div>
            </div>
            <div class="swiper-slide page2">
            	<img src="image/p2_01.png" class="p2_01 ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s"/>
            	<div class="p2_box ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="1.6s">
	            	<img src="image/p2_02.jpg" class="p2_02"/>
            	</div>
            	<div class="p2_box2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2s">
            		<p>印社 IN STUDIO zar＊同款 超轻超软超保暖短外套</p>
            	</div>
            </div>
            <div class="swiper-slide page3">
            	<div class="p3_box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.6s">
            		<img src="image/p3_01.jpg"/>
            	</div>
            	<div class="p3_box2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.2s">
            		<img src="image/p3_02.jpg"/>
            	</div>
            	<div class="p3_box3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.4s">
            		<img src="image/p3_03.jpg"/>
            	</div>
            	<div class="p3_box4 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.8s">
            		<img src="image/p3_04.jpg"/>
            	</div>
            	<div class="p3_box5 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.2s">
            		<p>印社 IN STUDIO 荷叶边，系带，两穿优雅针织衫</p>
            		<p>印社 IN STUDIO 绒面赫本式优雅伞裙</p>
            	</div>
            </div>
            
            <div class="swiper-slide page6">
            	<div class="p6_box ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">
            		<img src="image/p6_00.png"/>
            	</div>
            	<div class="p6_box2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
            		<img src="image/p6_01.png"/>
            	</div>
            	<div class="p6_box3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s">
            		<img src="image/p6_00.png"/>
            	</div>
            	<div class="p6_box4 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s">
            		<p class="menu">IN STUDIO</p>
            		<img src="image/p6_02.png"/>
            		<p class="tem">时尚新品 敬请期待</p>
            	</div>
            </div>
            <div class="swiper-slide page7">
            	<p class="content ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.6s" swiper-animate-delay="0.4s"><span>CONTACT </span>联系我们</p>
            	<div class="line ani"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.6s" swiper-animate-delay="0.6s">
            		<img src="image/p6_02.png"/>
            	</div>
            	<div class="p7_box ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.6s">
            		<img src="image/p7_01.png"/>
            	</div>
            	<div class="p7_box2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">
            		<img src="image/p7_02.png"/>
            	</div>
            	<div class="p7_box3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="1s">
            		<img src="image/p7_03.png"/>
            	</div>
            	<div class="p7_box4 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s">
            		<img src="image/p7_04.png"/>
            	</div>
            	<div class="p7_box5 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
					<p>印社 IN STUDIO</p>
            	</div>
            	<div class="p7_box6 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
					<p>188 xxxx xxxx</p>
            	</div>
            	<div class="p7_box7 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
					<p>xxxxxx@xx.com</p>
            	</div>
            	<div class="p7_box8 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.4s">
					<p>上海市 xx区 xx弄 xxx号</p>
            	</div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    		swiperAnimateCache(swiper); //隐藏动画元素 
    		swiperAnimate(swiper); //初始化完成开始动画
  		}, 
  		onSlideChangeEnd: function(swiper){ 
    		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  		} 
    });
    </script>
</body>
</html>















